<template>
	<el-dialog
		:title="dialog.title"
		v-model="dialog.visible"
		append-to-body
		:close-on-click-modal="false"
		destroy-on-close
		@closed="dialogClosed"
		width="1150px"
		top="0"
	>
		<el-form ref="form" :model="form" :rules="rules" label-width="80px">
			<el-row>
				<el-col :span="24">
					<el-form-item label="所属页面" prop="page_id">
						<el-cascader
							v-model="form.page_id"
							:options="diyPageList"
							:props="{
								value: 'id',
								label: 'name',
								emitPath: false
							}"
							disabled
						/>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<el-col :span="6">
					<el-form-item label="类型" prop="type_id">
						<el-cascader
							v-model="form.type_id"
							:disabled="form.id > 0"
							:options="typeIdList"
							:props="{
								value: 'id',
								label: 'type_name',
								emitPath: false
							}"
							@change="typeIdChange"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="标题" prop="title">
						<el-input v-model="form.title" />
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="排序" prop="sort">
						<el-input-number
							v-model="form.sort"
							controls-position="right"
							:min="0"
							:max="9999"
						/>
					</el-form-item>
				</el-col>
				<el-col :span="6">
					<el-form-item label="状态" prop="status">
						<el-radio-group v-model="form.status">
							<el-radio :label="1">启用</el-radio>
							<el-radio :label="0">禁用</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row>
				<form-diy-beneath ref="formDiyBeneath" :baseUrl="baseUrl" />
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="cancle">取消</el-button>

			<el-button type="primary" @click="doSubmit">修改</el-button>
		</template>
	</el-dialog>
</template>

<script>
import FormDiyBeneath from "./formDiyBeneath.vue";
export default {
	name: "form-diy",
	components: {
		// SelectGoodsTable,
		// SelectDialog,
		FormDiyBeneath
	},
	props: {
		baseUrl: String
	},
	emits: ["success"],
	data() {
		return {
			dialog: {
				title: "添加自定义组件",
				visible: false
			},
			typeIdList: [],
			diyPageList: [],
			form: {
				id: 0,
				page_id: 0,
				type_id: 0,
				title: "",
				sort: 0,
				status: 1,
				json_data: {}
			},
			rules: {}
		};
	},
	computed: {},
	mounted() {},
	methods: {
		initFormData() {
			this.form = {
				type_id: 0,
				title: "",
				sort: 0,
				status: 1,
				json_data: {}
			};
		},
		dialogClosed() {
			// 关闭后重置一些参数
			this.initFormData();
		},
		showDialog(page_id, id) {
			this.dialog.visible = true;
			this.form.page_id = page_id;
			this.form.id = id;
			this.getTypeIdList();
			this.getDiyPageList();
			if (id > 0) {
				this.getEditData();
			}
		},
		cancle() {
			this.dialog.visible = false;
		},
		typeIdChange(value) {
			this.$refs["formDiyBeneath"].changeTypeCode(this.getTypeCode(value));
		},
		getTypeCode(_id) {
			for (var i = 0; i < this.typeIdList.length; i++) {
				for (var j = 0; j < this.typeIdList[i].children.length; j++) {
					if (this.typeIdList[i].children[j].id == _id) {
						return this.typeIdList[i].children[j].type_code;
					}
				}
			}
			return "";
		},
		getTypeIdList() {
			this.$API.shop.diyPageType.list().then((res) => {
				if (res.code === 0) {
					this.typeIdList = this.$TOOL.deepTree(res.data, "parent_id");
				}
				else {
					this.$message.error('错误：' + res.message)
				}
			});
		},
		getDiyPageList() {
			const that = this;
			const pageTypeArray = { 0: "未知", 1: "首页", 2: "商品详情", 3: "我的" };
			this.$API.shop.diyPage.list().then((res) => {
				if (res.code === 0) {
					let l = [];
					res.data.map((item) => {
						l.push({
							id: item.id,
							name: item.page_name + " 类型：" + pageTypeArray[item.page_type]
						});
					});
					that.diyPageList = l;
				}
				else {
					this.$message.error('错误：' + res.message)
				}
			});
		},
		getEditData() {
			const that = this;
			this.$API.shop.diyPageItem
				.info({ id: this.form.id })
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						let resData = res.data
						this.form.page_id = resData.page_id;
						this.form.sort = resData.sort;
						this.form.title = resData.title;
						this.form.status = resData.status;
						this.form.type_id = resData.type_id;
						that.form.json_data = JSON.parse(resData.json_data);
						this.$refs["formDiyBeneath"].setEditData(
							that.getTypeCode(that.form.type_id),
							that.form.json_data
						);
					}
					else {
						this.$message.error('错误：' + res.message)
					}
				})
				.catch((err) => {
					console.log(err);
				});
		},
		doSubmit() {
			this.form.json_data = this.$refs["formDiyBeneath"].getData();
			const submitData = JSON.stringify(this.form);
			console.log(submitData);
			const method = this.form.id > 0 ? "update" : "add";
			this.$API.shop.diyPageItem[method](JSON.parse(submitData))
				.then((res) => {
					console.log(res);
					if (res.code === 0) {
						this.$message.success('操作成功');
						this.cancle();
						this.$emit("success");
					}
					else {
						this.$message.error('错误：' + res.message);
					}
				})
				.catch((err) => {
					console.log(err);
				});
		}
	}
};
</script>
